<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="icon" type="image/png" href="https://i.loli.net/2018/05/11/5af50d7591443.jpg">
    <meta http-equiv="refresh" content="300">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="apple-mobile-web-app-title" content="蓁奕科技" />
    <meta name="keywords" content="${metaKeywords!}" />
    <meta name="author" content="${metaAuthor!}" />
    <meta name="COPYRIGHT" content="${metaCopyRight!}" />
    <meta name="renderer" content="webkit">
    <title>贝康</title>
    <link href="https://cdn.bootcss.com/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullpage.min.css" rel="stylesheet">
    <style type="text/css">
    .zy-content-img {
        /*border: 2px solid;*/
        border-radius: 25px;
        -moz-border-radius: 25px;
        /* Old Firefox */
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .footerImage {
        max-width: 80%;
        height: 85px;
        /*width: 300px;*/
    }

    .bodyImage {
        max-width: 80%;
        /*width: 80%;*/
        /*width: 300px;*/
    }
    </style>
    <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.css" rel="stylesheet">
    <!-- Demo styles -->
    <style>
    html,
    body {
        position: relative;
        height: 100%;
    }

    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
    }

    .swiper-container {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        /*height: 300px;*/
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .content {
        height: 300px;
    }
    </style>
</head>

<body>
    <div id="fullpage">
        <#assign baseimg='http://pic.cenjiawen.com//ll2/bg.jpg' />
        <div class="section " data-percentage="80" data-centered="false">
            <div style="background: blue;height: 100px;"></div>
            <hr/>
            <div style="background: yellow;height: 5px;"></div>
        </div>
        <div class="section fp-noscroll" scrollOverflowOptions='true'>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <p class="back">返回</p>
                    </div>
                    <div class="swiper-slide">
                        <div style="background: blue;width: 100%">
                            <img class='footerImage' src="http://pic.cenjiawen.com//ll2/bg.jpg" class="am-img-responsive" alt="" style="height: 250px;">
                            <div class="am-text-center" style="background: green">
                            </div>
                            <p> ACI国际母婴管理师 38岁 带过40个宝宝 点击照片查看详情
                            </p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div style="background: blue;width: 100%">
                            <img class='footerImage' src="http://pic.cenjiawen.com//ll2/bg.jpg" class="am-img-responsive" alt="" style="height: 250px;">
                            <div class="am-text-center" style="background: green">
                            </div>
                            <p> ACI国际母婴管理师 38岁 带过40个宝宝 点击照片查看详情
                            </p>
                        </div>
                    </div>
                    <div class="swiper-slide"></div>
                    <div class="swiper-slide"></div>
                    <div class="swiper-slide"></div>
                </div>
                <!-- Add Pagination -->
                <!-- <div class="swiper-pagination"></div> -->
            </div>
        </div>
        <!-- <div class="section fp-auto-height">Some section3</div> -->
        <!-- <div class="section">Some section4</div> -->
    </div>
    <div style="height: 450px;">
        <div class='bodyContent am-text-center' style="background: yellow">
        </div>
        <div class='content' style="background: blue">
            <p> ACI国际母婴管理师 38岁 带过40个宝宝 点击照片查看详情
            </p>
        </div>
        <div class="am-text-center" style="background: green">
            <img class='footerImage' src="${baseimg}?imageMogr2/auto-orient/thumbnail/300x500/gravity/North/crop/x85/blur/1x0/quality/75|imageslim" class="am-img-responsive" alt="">
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/amazeui/2.7.2/js/amazeui.min.js"></script>
    <script src="https://cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullpage.extensions.min.js"></script>
    <script src="https://cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullpage.min.js"></script>
    <script src="https://cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullpage.extensions.min.js"></script>
    <script type="text/javascript">
    var fp = $('#fullpage').fullpage({
        //options here
        autoScrolling: true,
        scrollHorizontally: false,
        controlArrows: true,
        offsetSections: true,
        afterResize: function(width, height) {
            console.log('hhh')
            console.log(height)
        },
        afterLoad: function(origin, destination, direction) {
            console.log(destination)
            scrollTo(0, 300)
        },
        afterSlideLoad: function(section, origin, destination, direction) {
            console.log('afterSlideLoad')
            console.log(origin)
        },
        afterRender: function() {
            // var pluginContainer = this;
            // console.log(pluginContainer)
            // console.log($('#fullpage'))
        },
        // continuousVertical: true

    });
    $(".back").click(function() {
        $('#fullpage').fullpage.moveSectionUp()
    });

    // document.re
    // window.screen.height
    $(document).ready(function() {
        var hei = window.screen.height
        var footerHeight = 85;
        var heiLeft = hei - footerHeight;
        // console.log(hei)
        // console.log(footerHeight)
        // console.log(heiLeft)
        // console.log(heiLeft * 0.8)
        // $(".bodyContent").css("height", heiLeft * 0.8 + "px");
        // $(".content").css("height", heiLeft * 0.2 + "px");
        // $(".footerImage").css("height", hei * 0.2 + "px");
        // alert(window.screen.height)
    });
    </script>
    <script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.js"></script>
    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        // nested: true,
        autoHeight: true, //enable auto height
        direction: 'vertical',
        slidesPerView: 4,
        spaceBetween: 30,
        centeredSlides: false,
        height: 300 * 6,
        autoHeight: true,
        // autoHeight: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        scrollbar: {
            el: '.swiper-scrollbar',
            hide: true,
        },
    });
    swiper.on('slideChange', function() {
        console.log(swiper);
    });
    </script>
</body>

</html>